<template>
  <div style="background: #fff;overflow: hidden;  height:100%; padding-bottom:50px;">
    <van-nav-bar
      v-if="is_admin == 1 "
      title=""
      :left-text="(is_admin == 1 || info.user_id == user.id)?'删除':''"
      @click-right="isshow = true"
      @click-left="onClickLeft"
    >

    <template #right>
      <van-button type="primary" v-if="(info.status == 0 || info.status == -1)" size="mini">审核</van-button>
    </template>
    </van-nav-bar>
    <van-notice-bar v-if="info.status == -1"
      wrapable
      :scrollable="false"
      :text="'拒绝原因：'+info.remark"
    />
    <div style="position: fixed; right:0; top: 30%;" v-if="(info.status == 0 || info.status == -1)">
    <van-button type="primary" size="normal" round native-type="button" @click="editor">编辑</van-button>
    </div>
    <div class="title">{{info.title}}</div>
    <div class="ftitle">年级: {{info.classname}}</div>
    <div class="ftitle">班级: {{info.classnames}}</div>
    <div class="ftitle">学科: {{info.subject}}</div>
    <div class="ftitle">教师/主备人: {{info.teacher}}</div>
    <div class="thumbs">
      <img :src="item.file" v-for="(item, index) in info.imgs" v-if="'png,jpg,jpeg,bmp,gif'.indexOf(item.extension) >=0" />
      
    </div>
    <div class="files van-uploader"><div class="van-uploader__wrapper">
      <div class="van-uploader__preview" v-for="(item, index) in info.imgs" v-if="'png,jpg,jpeg,bmp,gif'.indexOf(item.extension) <0">
        <div class="van-uploader__file" @onlcik="jumpFile(item.file)">
          <i class="van-icon van-icon-description van-uploader__file-icon"><!----></i>
          <div class="van-uploader__file-name van-ellipsis">{{item.title}}</div>
        </div>
      </div></div>
    </div>
    <div class="content">过程要点记录: <br />{{info.content}}</div>
    <div class="content">听课/听教研评价: <br />
      <div v-if="typeof info.content1 == 'object'" >
        <p>不足或缺点：</p>
        <div class="" v-for="(item, index) in info.content1">{{index+1}}、<span v-if="item != null && item.value1">{{item.value1}}</span><span v-else>{{item}}</span></div>
        <p>优评</p>
        <div class="" v-for="(item, index) in info.content2">{{index+1}}、<span v-if="item != null">{{item.value2}}</span><span v-else>{{item}}</span></div>
      </div>
      <div class="" v-else>{{info.content1}}</div>
    </div>

    <Bottom></Bottom>
    <van-dialog v-model="isshow" title="审核" show-cancel-button @confirm="confirm">
      <van-form>
        <van-field name="radio" label="通过与否">
          <template #input>
            <van-radio-group v-model="radio" direction="horizontal">
              <van-radio name="1">通过</van-radio>
              <van-radio name="-1">不通过</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="text"
          name="text"
          label="不通过理由"
          placeholder="请输入不通过理由"
          :rules="[{ message: '请输入不通过理由' }]"
        />
      </van-form>
    </van-dialog>
  </div>

</template>
<script>
  import { show, check, deleteRow } from '@/api/app'
	import Bottom from '@/components/bottom'
export default {
  data() {
    return {
      user: this.$store.state.user,
      activeNames: ['1'],
      info: [],
      isshow: false,
      text: '',
      radio: true,
      is_admin: this.$store.state.isadmin


    }
  },
  components: {
    Bottom
  },
  computed: {},
  mounted() {},
  created() {
    this.init()
  },

  methods: {
    init() {
      show(this.$route.params.id).then(res=>{
        this.info = res
      })
    },
    confirm(){
      if(this.radio == -1 && this.text == '') {
        this.$toast('不通过理由必须填写')
        return false
      }
      this.onClickRight()
    },
    onClickRight(){
      this.isshow = 1
      if(this.is_admin == 0) return
      let that = this
      check({id: this.info.id, status: this.radio, text: this.text}).then(res=>{
        this.$toast({
          message: res,
          onClose: function(){
            that.$router.push({name: 'Check'})
          }
        })
      })
    },
    onClickLeft(){
      this.$dialog.alert({
        title: '确认要删除？',
        message: '删除后不能恢复',
        showCancelButton: true,
      }).then(() => {
        deleteRow(this.info.id).then(res=> {
          this.$router.push({name: 'Check'})
        })
      });
    },
    jumpFile(url) {
      window.location.href = url
    },
    editor(){
      localStorage.setItem('__add__', JSON.stringify(this.info))
      this.$router.push({name: 'Add'})
    }
  }
};
</script>
<style>
.ftitle{ width: 90%; margin: 20px auto; }
.files{ margin: 20px auto; }
.title{text-align: center;line-height: 30px; font-size: 20px;overflow: hidden; margin-top: 30px; }
  .thumbs{ width: 100%; text-align:  center;overflow: hidden;  }
  .thumbs img{ width: 90%; }
  .content{ width: 90%; margin: 20px auto;  overflow: hidden;padding-bottom: 50px; }
</style>